<template>
	<view class="login-container">

		<view class="login-input">
			<view class="header_div">
				<input class="phone_input-item" type="number" maxlength="11" v-model="phone"
					placeholder="手机号" />
				<view :class="[disabledCode==true?'code_text_tap':'code_text']"
					:disabled="disabledCode" @click="sendSMS()">{{codeText}}</view>
			</view>

			<input class="input-item" type="text" v-model="code" placeholder="验证码" />
		</view>
		<button class="login-btn_no" type="default" @click="verificationCode()">下一步</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				phone: null,
				code: null,
				disabled: false,
				disabledCode: false,
				codeText: '获取验证码',
				counttime: '',
				codeTextLast: '',
				show: false,
				commodityId: null,
				token: null,
				
				//订单
				order: {
					buyerTele: null,
					commodity: null,
					number: null,
				},
				//采购商
				buyerAccount: {

				},
			}
		},
		created() {
			this.recordToken();
			this.getcommodityId();
		},
		methods: {
			/**
			 * 根据url获取商品id
			 */
			getcommodityId() {
				this.commodityId = this.$route.query.id;
			},
			/**
			 * 验证验证码
			 */
			verificationCode(){
				const url = "http://localhost:8088/buyer-order/book/" + this.phone + "/" + this.code ;
				if(this.phone == null) {
					uni.showToast({
						title: "请输入手机号！",
						icon: 'error',
						duration: 2000
					});
				} else {
					uni.request({
						url: url,
						method: 'POST',
						header: {
							'content-type': 'application/json',
							'token': this.token
						},
						success: (res) => {
							console.log(res.data.code);
							if(res.data.code == 1) {
								const url = "/pages/show/show?tele=" + this.phone + "&id=" + this.commodityId;
								this.goto(url);
							} else {
								uni.showToast({
									title: "验证码错误，或已过期！",
									icon: 'error',
									duration: 2000
								});
							}
							
							
						},
						fail: (err) => {
							console.error('获取首页展示的商品列表请求失败：', err);
						}
					});
				}
			},
			/**
			 * @param {Object} 获取验证码
			 */
			sendSMS(){
				const url = "http://localhost:8088/buyer-order/sendSMS/" + this.phone;
				uni.request({
					url: url,
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						uni.showToast({
							title: res.data.data,
							icon: 'success',
							duration: 2000
						});
						
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			/**
			 * 获取JWT
			 */
			recordToken() {
				this.token = localStorage.getItem('token');
				console.log(this.token);
			},
			addOrder() {
				const url = "http://localhost:8088/buyer-order/addOrder";
				uni.request({
					url: url,
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.order = res.data;
						console.log(this.order);
						// this.supplierGroups = this.chunkArray(this.suppliers, 3);
						// console.log(this.supplierGroups);
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});

			},
		}
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
		background-color: rgba(245, 245, 245, 1);
	}

	/* 
	.code_text::after {
		border: none;
			}
	.code_text::selection {
		background: rgba(255, 255, 255, 1);
	} */
	.header_div {
		width: 100%;
	}

	.text_div {
		width: 95%;
	}

	.mott_div {
		width: 95%;
		position: fixed;
		bottom: 6px;
	}


	.send_code_div {
		float: left;
		width: 50%;
		background: rgba(255, 255, 255, 1);
	}

	.code_text {
		display: block;
		float: left;
		width: 35%;
		height: 106rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(102, 166, 255, 1);
		background: rgba(255, 255, 255, 1);
		line-height: 106rpx;
	}

	.code_text_tap {
		display: block;
		float: left;
		width: 35%;
		height: 106rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(102, 166, 255, 1);
		background: rgba(255, 255, 255, 1);
		line-height: 106rpx;
		pointer-events: none;
	}

	.login-container {
		width: 100%;
		height: 100%;
	}


	.login-input {
		width: calc(100% - 40rpx);
		overflow: hidden;
		margin: 0 auto;
		margin-top: 40rpx;
	}

	.phone_input-item {
		display: block;
		width: 53%;
		float: left;
		background: rgba(255, 255, 255, 1);
		border-radius: 4rpx;
		padding: 30rpx 40rpx;
		margin: 0 0 20rpx 0;
		line-height: 44rpx;
	}

	.input-item {
		width: 100%;
		height: 44rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 4rpx;
		padding: 30rpx 40rpx;
		margin: 0 0 20rpx 0;
		line-height: 44rpx;
	}


	.login-btn {
		width: calc(100% - 40rpx);
		height: 100rpx;
		margin: 0 auto;
		background: linear-gradient(136deg, rgba(102, 166, 255, 1) 0%, rgba(65, 136, 255, 1) 100%);
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.login-btn_no {
		width: calc(100% - 40rpx);
		height: 100rpx;
		margin: 0 auto;
		background-color: rgba(60, 156, 255, 1) !important;
		border-radius: 4rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		line-height: 100rpx;
		text-align: center;
		margin-top: 20rpx;
	}
</style>